<script lang="ts">
	import { CardInfo, LEARN_LEVEL } from '$lib/api/proto/resource_card_api';
	import { appStore } from '$lib/stores/app.svelte';
	import { userStore } from '$lib/stores/user.svelte';
	import { callApi } from '$lib/utils/call_utils';
	import moment from 'moment';
	import ViewResourceCardModal from '../modals/resource/ViewResourceCardModal.svelte';
	import { roadmapStore } from '../store.svelte';

	let cardList = $state([] as CardInfo[]);

	let viewCardId = $state('');

	const noneLvCardList = $derived(
		cardList.filter((item) => item.learnLevel == LEARN_LEVEL.LEARN_LEVEL_NONE)
	);
	const knowLvCardList = $derived(
		cardList
			.filter((item) => item.learnLevel == LEARN_LEVEL.LEARN_LEVEL_KNOW)
			.sort((a, b) => Number(b.learnTime - a.learnTime))
	);
	const knowWellLvCardList = $derived(
		cardList
			.filter((item) => item.learnLevel == LEARN_LEVEL.LEARN_LEVEL_KNOW_WELL)
			.sort((a, b) => Number(b.learnTime - a.learnTime))
	);
	const masterLvCardList = $derived(
		cardList
			.filter((item) => item.learnLevel == LEARN_LEVEL.LEARN_LEVEL_MASTER)
			.sort((a, b) => Number(b.learnTime - a.learnTime))
	);
	const skillfulLvCardList = $derived(
		cardList
			.filter((item) => item.learnLevel == LEARN_LEVEL.LEARN_LEVEL_SKILLFUL)
			.sort((a, b) => Number(b.learnTime - a.learnTime))
	);

	async function loadCardList() {
		if (
			userStore.userSession == null ||
			userStore.userInfo == null ||
			roadmapStore.selectNodeIdList.length == 0
		) {
			return;
		}
		const res = await callApi(
			appStore.resourceCardApiClient.listByRoadmap({
				sessionId: userStore.userSession,
				roadmapId: roadmapStore.roadmapId,
				nodeId: roadmapStore.selectNodeIdList[0],
				targetMemberUserId:
					roadmapStore.roadmapMode == 'update'
						? userStore.userInfo.userId
						: roadmapStore.targetMemberUserId,
				filterByLearnLevel: false,
				learnLevel: LEARN_LEVEL.LEARN_LEVEL_NONE,
				withContent: true,
				offset: 0,
				limit: 99999999
			}).response
		);
		cardList = res.cardList;
	}

	loadCardList();
</script>

<div class="bg-base-200 w-[400px] p-2 rounded-box">
	<h2 class="font-bold text-2xl">学习状态</h2>
	<div class="h-[calc(100vh-240px)] overflow-y-auto mr-2 space-y-2 pt-[20px] pb-[20px]">
		{#if noneLvCardList.length > 0}
			<div class="border-2 rounded-box bg-base-100 border-base-300">
				<h3 class="font-bold text-lg bg-base-300 p-1 rounded-box">未学习</h3>
				<div class="flex flex-wrap gap-2 p-2">
					{#each noneLvCardList as card}
						<button type="button" class="btn btn-ghost" onclick={() => (viewCardId = card.cardId)}
							>{card.basicInfo?.title}</button
						>
					{/each}
				</div>
			</div>
		{/if}
		{#if knowLvCardList.length > 0}
			<div class="border-2 rounded-box bg-base-100 border-base-300">
				<h3 class="font-bold text-lg bg-base-300 p-1 rounded-box">了解</h3>
				{#each knowLvCardList as card}
					<div class="flex flex-wrap overflow-hidden truncate gap-2 items-center p-2">
						<div>{moment(Number(card.learnTime)).format('YYYY-MM-DD HH:mm:ss')}</div>
						<button type="button" class="btn btn-ghost" onclick={() => (viewCardId = card.cardId)}
							>{card.basicInfo?.title}</button
						>
					</div>
				{/each}
			</div>
		{/if}
		{#if knowWellLvCardList.length > 0}
			<div class="border-2 rounded-box bg-base-100 border-base-300">
				<h3 class="font-bold text-lg bg-base-300 p-1 rounded-box">熟悉</h3>
				{#each knowWellLvCardList as card}
					<div class="flex flex-wrap overflow-hidden truncate gap-2 items-center p-2">
						<div>{moment(Number(card.learnTime)).format('YYYY-MM-DD HH:mm:ss')}</div>
						<button type="button" class="btn btn-ghost" onclick={() => (viewCardId = card.cardId)}
							>{card.basicInfo?.title}</button
						>
					</div>
				{/each}
			</div>
		{/if}
		{#if masterLvCardList.length > 0}
			<div class="border-2 rounded-box bg-base-100 border-base-300">
				<h3 class="font-bold text-lg bg-base-300 p-1 rounded-box">掌握</h3>
				{#each masterLvCardList as card}
					<div class="flex flex-wrap overflow-hidden truncate gap-2 items-center p-2">
						<div>{moment(Number(card.learnTime)).format('YYYY-MM-DD HH:mm:ss')}</div>
						<button type="button" class="btn btn-ghost" onclick={() => (viewCardId = card.cardId)}
							>{card.basicInfo?.title}</button
						>
					</div>
				{/each}
			</div>
		{/if}
		{#if skillfulLvCardList.length > 0}
			<div class="border-2 rounded-box bg-base-100 border-base-300">
				<h3 class="font-bold text-lg bg-base-300 p-1 rounded-box">精通</h3>
				{#each skillfulLvCardList as card}
					<div class="flex flex-wrap overflow-hidden truncate gap-2 items-center p-2">
						<div>{moment(Number(card.learnTime)).format('YYYY-MM-DD HH:mm:ss')}</div>
						<button type="button" class="btn btn-ghost" onclick={() => (viewCardId = card.cardId)}
							>{card.basicInfo?.title}</button
						>
					</div>
				{/each}
			</div>
		{/if}
	</div>
</div>

<div class="absolute -left-[10000px]">
	{#if viewCardId != ''}
		<ViewResourceCardModal
			cardId={viewCardId}
			{cardList}
			onChange={(cardId: string, newLv: LEARN_LEVEL) => {
				const tmpList = cardList.slice();
				const index = tmpList.findIndex((item) => item.cardId == cardId);
				if (index != -1) {
					tmpList[index].learnLevel = newLv;
					tmpList[index].learnTime = BigInt(moment().valueOf());
					cardList = tmpList;
				}
			}}
			onClose={() => (viewCardId = '')}
		/>
	{/if}
</div>
